<div [ngClass]="{'mb-user': !httpService.devType}" class="clearfix" [class]="httpService.devType?'contentWrapPc':'contentWrapMb'">
  <div *ngIf="httpService.devType" style="margin-bottom: 25px;display: flex;justify-content: space-between;align-items: baseline">
    <img alt="" src="../../assets/logo.png" width="324">
    <div style="">
      <span>没有账号？</span>
      <span (click)="router.navigateByUrl('/register')" style="color: #D10000;font-size: 14px;cursor: pointer">去注册</span>
      <span>&nbsp;|&nbsp;</span>
      <span (click)="router.navigateByUrl('/index')" style="color: #D10000;font-size: 14px;cursor: pointer">返回职场司南</span>
    </div>
  </div>

  <div [class]="httpService.devType?'vb-show':'mb-show'">

    <h3 style="text-align: center;font-family: MicrosoftYaHei;font-size: 24px;font-weight: normal;font-stretch: normal;height: 60px;line-height: 60px">用户登录</h3>

    <form (ngSubmit)="login()" [formGroup]="validateForm" [class]="httpService.devType?'li-form':''" nz-form>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="phoneNumber" nzRequired>手机号</nz-form-label>
        <nz-form-control [nzSm]="14" [nzValidateStatus]="validateForm.controls['username']" [nzXs]="24">
          <input formControlName="username" id="'phoneNumber'" nz-input/>
          <nz-form-explain *ngIf="validateForm.get('username')?.dirty && validateForm.get('username')?.errors">
            请输入您的电话号码
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <!--<nz-form-item>-->
        <!--<nz-form-label [nzSm]="6" [nzXs]="24" nzFor="password" nzRequired>密码</nz-form-label>-->
        <!--<nz-form-control [nzSm]="14" [nzXs]="24">-->
          <!--<input formControlName="password" id="password" nz-input type="password"/>-->
          <!--<nz-form-explain *ngIf="validateForm.get('password')?.dirty && validateForm.get('password')?.errors">长度为4-16，只支持大小写字母及数字</nz-form-explain>-->
        <!--</nz-form-control>-->
      <!--</nz-form-item>-->

      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="captcha" nzRequired>验证码</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <div [nzGutter]="8" nz-row>
            <div [nzSpan]="14" nz-col>
              <input formControlName="captcha" id="captcha" nz-input/>
            </div>
            <div [nzSpan]="10" nz-col>
              <button (click)="getCaptcha($event)" [disabled]="btn_clicked" class="getCode" nz-button>{{getBtnText()}}</button>
            </div>
          </div>
          <nz-form-explain *ngIf="validateForm.get('password')?.dirty && validateForm.get('password')?.errors">请输入验证码</nz-form-explain>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item nz-row style="margin-bottom:8px;">
        <nz-form-control [nzSm]="{ span: 14, offset: 6 }" [nzXs]="{ span: 24, offset: 0 }">
          <div [nzSpan]="24" nz-col>
            <button [hidden]="!validateForm.invalid" [disabled]="validateForm.invalid" [nzType]="'primary'" nz-button nzBlock nzSize="large" style="background: #ccc;color: #fff;border: none">登录</button>
            <button [hidden]="validateForm.invalid" [disabled]="validateForm.invalid" [nzType]="'primary'" nz-button nzBlock nzSize="large" style="background: #D10000;color: #fff;border: none">登录</button>
          </div>
          <!--<a routerLink="/passport" style="font-size: 14px;color: #666;margin-top: 20px">忘记密码?</a>-->
        </nz-form-control>
      </nz-form-item>
    </form>

  </div>

  <div *ngIf="!httpService.devType" style="text-align: center;margin-top: 20px">
    <span style="color: #999;">没有账号?去</span>
    <span style="color: #d10000;cursor: pointer" routerLink="/register">注册</span>
  </div>
  <footer *ngIf="httpService.devType" style="padding-top: 40px">
    Copyright © 2018-2019 职场司南 浙ICP备18039212号 <i nz-icon nzTheme="outline" nzType="phone"></i> 0571-85383155
  </footer>
</div>

